<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>{{ $t("service_order_overall_statistics") }}</span>
        <div>
          <el-radio-group
            v-model="countOne.yearOrMonth"
            size="small"
            style="margin-left: 16px"
          >
            <el-radio-button label="1">{{ $t("year") }}</el-radio-button>
            <el-radio-button label="0">{{ $t("month") }}</el-radio-button>
          </el-radio-group>
          <template v-if="countOne.yearOrMonth == 0">
            <el-radio-group
              v-model="countOne.isMonth"
              size="small"
              style="margin-left: 16px"
              @change="handleUPmonth"
            >
              <el-radio-button label="1">{{
                $t("this_month")
              }}</el-radio-button>
              <el-radio-button label="0">{{
                $t("last_month")
              }}</el-radio-button>
            </el-radio-group>
            <el-date-picker
              v-model="countOne.month"
              type="month"
              :placeholder="$t('please_select',{name:''})"
              size="small"
              value-format="yyyy-MM"
              style="width: 120px; margin-left: 16px"
              @change="handleChangeMonth"
            >
            </el-date-picker>
          </template>

          <el-date-picker
            v-model="countOne.year"
            type="year"
            :placeholder="$t('please_select',{name:''})"
            size="small"
            style="width: 100px; margin-left: 16px"
            value-format="yyyy"
            v-if="countOne.yearOrMonth == 1"
            @change="handleChangeYear"
          >
          </el-date-picker>
        </div>
      </div>
      <div>
        <lineChart :chartData="countOneData"></lineChart>
      </div>
    </el-card>

    <el-card class="box-card" shadow="never" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>{{ $t("service_order_type_statistics") }}</span>
        <div>
          <el-radio-group
            v-model="countTwo.yearOrMonth"
            size="small"
            style="margin-left: 16px"
          >
            <el-radio-button label="1">{{ $t("year") }}</el-radio-button>
            <el-radio-button label="0">{{ $t("month") }}</el-radio-button>
          </el-radio-group>
          <template v-if="countTwo.yearOrMonth == 0">
            <el-radio-group
              v-model="countTwo.isMonth"
              size="small"
              style="margin-left: 16px"
              @change="handleUPmonthTwo"
            >
              <el-radio-button label="1">{{
                $t("this_month")
              }}</el-radio-button>
              <el-radio-button label="0">{{
                $t("last_month")
              }}</el-radio-button>
            </el-radio-group>
            <el-date-picker
              v-model="countTwo.month"
              type="month"
              :placeholder="$t('please_select',{name:''})"
              size="small"
              value-format="yyyy-MM"
              style="width: 120px; margin-left: 16px"
              @change="handleChangeMonthTwo"
            >
            </el-date-picker>
          </template>

          <el-date-picker
            v-model="countTwo.year"
            type="year"
            :placeholder="$t('please_select',{name:''})"
            size="small"
            value-format="yyyy"
            style="width: 100px; margin-left: 16px"
            v-if="countTwo.yearOrMonth == 1"
            @change="handleChangeYearTwo"
          >
          </el-date-picker>
        </div>
      </div>
      <div>
        <barChart :chartData="countTwoData"></barChart>
      </div>
    </el-card>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span>{{ $t("employee_service_statistics") }}</span>
            <div>
              <el-radio-group
                v-model="countThree.yearOrMonth"
                size="small"
                style="margin-left: 16px"
              >
                <el-radio-button label="1">{{ $t("year") }}</el-radio-button>
                <el-radio-button label="0">{{ $t("month") }}</el-radio-button>
              </el-radio-group>
              <template v-if="countThree.yearOrMonth == 0">
                <el-radio-group
                  v-model="countThree.isMonth"
                  size="small"
                  style="margin-left: 16px"
                  @change="handleUPmonthThree"
                >
                  <el-radio-button label="1">{{
                    $t("this_month")
                  }}</el-radio-button>
                  <el-radio-button label="0">{{
                    $t("last_month")
                  }}</el-radio-button>
                </el-radio-group>
                <el-date-picker
                  v-model="countThree.month"
                  type="month"
                  :placeholder="$t('please_select',{name:''})"
                  size="small"
                  value-format="yyyy-MM"
                  style="width: 120px; margin-left: 16px"
                  @change="handleChangeMonthThree"
                >
                </el-date-picker>
              </template>

              <el-date-picker
                v-model="countThree.year"
                type="year"
                :placeholder="$t('please_select',{name:''})"
                size="small"
                value-format="yyyy"
                style="width: 100px; margin-left: 16px"
                v-if="countThree.yearOrMonth == 1"
                @change="handleChangeYearThree"
              >
              </el-date-picker>
            </div>
          </div>
          <div>
            <el-table :data="tableOneData" height="300" border :max-height="tableHeight">
              <el-table-column
                :label="$t('sort')"
                align="center"
                prop="sort"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('employee_name1')"
                align="center"
                prop="name"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                :label="$t(completed)"
                align="center"
                prop="completed"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                :label="$t('in_progress')"
                align="center"
                prop="inProgress"
                :show-overflow-tooltip="true"
              />
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span>{{ $t("service_order_statistics") }}</span>
            <div>
              <el-radio-group
                v-model="countFour.yearOrMonth"
                size="small"
                style="margin-left: 16px"
              >
                <el-radio-button label="1">{{ $t("year") }}</el-radio-button>
                <el-radio-button label="0">{{ $t("month") }}</el-radio-button>
              </el-radio-group>
              <template v-if="countFour.yearOrMonth == 0">
                <el-radio-group
                  v-model="countFour.isMonth"
                  size="small"
                  style="margin-left: 16px"
                  @change="handleUPmonthFour"
                >
                  <el-radio-button label="1">{{
                    $t("this_month")
                  }}</el-radio-button>
                  <el-radio-button label="0">{{
                    $t("last_month")
                  }}</el-radio-button>
                </el-radio-group>
                <el-date-picker
                  v-model="countFour.month"
                  type="month"
                  :placeholder="$t('please_select',{name:''})"
                  value-format="yyyy-MM"
                  size="small"
                  style="width: 120px; margin-left: 16px"
                  @change="handleChangeMonthFour"
                >
                </el-date-picker>
              </template>

              <el-date-picker
                v-model="countFour.year"
                type="year"
                :placeholder="$t('please_select',{name:''})"
                size="small"
                value-format="yyyy"
                style="width: 100px; margin-left: 16px"
                v-if="countFour.yearOrMonth == 1"
                @change="handleChangeYearFour"
              >
              </el-date-picker>
            </div>
          </div>
          <div>
            <el-table :data="tableTwoData" height="300" border>
              <el-table-column
                :label="$t('sort')"
                align="center"
                prop="sort"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('service_order_type')"
                align="center"
                prop="name"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                :label="$t('completed')"
                align="center"
                prop="completed"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                :label="$t('in_progress')"
                align="center"
                prop="inProgress"
                :show-overflow-tooltip="true"
              />
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import moment from "moment";
import lineChart from "@/views/dashboard/LineChart.vue";
import barChart from "@/views/dashboard/BarChart.vue";
import {
  getTotalStatistics,
  getTypeStatistics,
  getUserStatistics,
  getSortStatistics,
} from "@/api/custom/serviceUnitList";
export default {
  name: "Count",
  components: {
    lineChart,
    barChart,
  },
  data() {
    return {
      countOne: {
        yearOrMonth: "0",
        isMonth: "1",
        month: null,
        year: null,
      },
      countTwo: {
        yearOrMonth: "0",
        isMonth: "1",
        month: null,
        year: null,
      },
      countThree: {
        yearOrMonth: "0",
        isMonth: "1",
        month: null,
        year: null,
      },
      countFour: {
        yearOrMonth: "0",
        isMonth: "1",
        month: null,
        year: null,
      },
      countOneData: {
        category: [],
        lineData: [
          {
            name: this.$t("daily_growth"),
            data: [],
          },
          {
            name: this.$t("in_progress_service_order"),
            data: [],
          },
          {
            name: this.$t("completed_service_order"),
            data: [],
          },
        ],
      },
      countTwoData: {
        category: [],
        barData: [],
      },
      tableOneData: [],
      tableTwoData: [
        {
          sort: "1",
          name: this.$t("type1"),
          num1: 10,
          num2: 20,
        },
        {
          sort: "1",
          name: this.$t("type1"),
          num1: 10,
          num2: 20,
        },
        {
          sort: "1",
          name: this.$t("type1"),
          num1: 10,
          num2: 20,
        },
      ],
      today: "",
      yearL: "",
      monthL: "",
    };
  },
  created() {
    this.today = new Date();
    this.year = this.today.getFullYear();
    this.month = this.today.getMonth() + 1;
    if (this.month < 10) {
      this.month = "0" + this.month;
    }
    this.countOne.month = this.year + "-" + this.month;
    this.countTwo.month = this.year + "-" + this.month;
    this.countThree.month = this.year + "-" + this.month;
    this.countFour.month = this.year + "-" + this.month;
    this.getgetTotalStatistics();
    this.getgetTypeStatistics();
    this.getgetUserStatistics();
    this.getgetSortStatistics();
  },
  methods: {
    handleUPmonth(val) {
      this.countOne.year = "";
      if (val == 1) {
        this.countOne.month = moment().format("YYYY-MM");
      } else {
        this.countOne.month = moment()
          .subtract(1, "months")
          .endOf("month")
          .format("YYYY-MM");
      }
      this.getgetTotalStatistics();
    },
    handleUPmonthTwo(val) {
      this.countTwo.year = "";
      if (val == 1) {
        this.countTwo.month = moment().format("YYYY-MM");
      } else {
        this.countTwo.month = moment()
          .subtract(1, "months")
          .endOf("month")
          .format("YYYY-MM");
      }
      this.getgetTypeStatistics();
    },
    handleUPmonthThree(val) {
      this.countThree.year = "";
      if (val == 1) {
        this.countThree.month = moment().format("YYYY-MM");
      } else {
        this.countThree.month = moment()
          .subtract(1, "months")
          .endOf("month")
          .format("YYYY-MM");
      }
      this.getgetUserStatistics();
    },
    handleUPmonthFour(val) {
      this.countFour.year = "";
      if (val == 1) {
        this.countFour.month = moment().format("YYYY-MM");
      } else {
        this.countFour.month = moment()
          .subtract(1, "months")
          .endOf("month")
          .format("YYYY-MM");
      }
      this.getgetSortStatistics();
    },
    handleChangeYear() {
      this.countOne.month = "";
      if (this.countOne.year) {
        this.getgetTotalStatistics();
      }
    },
    handleChangeYearTwo() {
      this.countTwo.month = "";
      if (this.countTwo.year) {
        this.getgetTypeStatistics();
      }
    },
    handleChangeYearThree() {
      this.countThree.month = "";
      if (this.countThree.year) {
        this.getgetUserStatistics();
      }
    },
    handleChangeYearFour() {
      if (this.countFour.year) {
        this.getgetSortStatistics();
      }
    },
    handleChangeMonth() {
      if (this.countOne.month) {
        this.getgetTotalStatistics();
      }
    },
    handleChangeMonthTwo() {
      if (this.countTwo.month) {
        this.getgetTypeStatistics();
      }
    },
    handleChangeMonthThree() {
      if (this.countThree.month) {
        this.getgetUserStatistics();
      }
    },
    handleChangeMonthFour() {
      this.countFour.month = "";
      if (this.countFour.month) {
        this.getgetSortStatistics();
      }
    },

    getgetTotalStatistics() {
      this.countOneData.category = [];
      getTotalStatistics({
        date: this.countOne.year || this.countOne.month,
        type: this.countOne.yearOrMonth,
      }).then((res) => {
        if (res.code == 200) {
          res.data.forEach((item) => {
            this.countOneData.category.push(item.x);
            this.countOneData.lineData.forEach((q) => {
              if (q.name == this.$t("daily_growth")) {
                q.data.push(item.dailyGrowth);
              }
              if (q.name == this.$t("in_progress_service_order")) {
                q.data.push(item.inProgress);
              }
              if (q.name == this.$t("completed_service_order")) {
                q.data.push(item.completed);
              }
            });
          });
          this.$forceUpdate();
        }
      });
    },

    getgetTypeStatistics() {
      this.countTwoData.category = [];
      this.countTwoData.barData = [];
      getTypeStatistics({
        date: this.countTwo.year || this.countTwo.month,
        type: this.countTwo.yearOrMonth,
      }).then((res) => {
        res.data.forEach((item) => {
          this.countTwoData.category.push(item.name);
          this.countTwoData.barData.push(item.num);
        });
      });
    },

    getgetUserStatistics() {
      getUserStatistics({
        date: this.countThree.year || this.countThree.month,
        type: this.countThree.yearOrMonth,
      }).then((res) => {
        if (res.code == 200) {
          this.tableOneData = res.data;
        }
      });
    },
    getgetSortStatistics() {
      getSortStatistics({
        date: this.countFour.year || this.countFour.month,
        type: this.countFour.yearOrMonth,
      }).then((res) => {
        if (res.code == 200) {
          this.tableTwoData = res.data;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-card__header {
  padding: 15px;
}

::v-deep .el-card__header .clearfix {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

::v-deep .el-card__header .clearfix:after {
  content: none;
}

::v-deep .el-table::before {
  height: 0;
}
</style>
